<template>
	<view class="content">
		<view class="info">
			<view class="info-photo">
				<text class="photo-content">头像</text>
				<image class="photo" :src="$getHead(user.photo)" mode="scaleToFill" border="0"></image>
			</view>
			<view class="space"></view>
			<view class="info-item">
				<text class="item-content">账号</text>
				<text class="item-value">{{user.account}}</text>
			</view>
			<view class="space"></view>
			<view class="info-item">
				<text class="item-content">是否管理员</text>
				<text class="item-value">{{user.isSuper | optionsFilter(yesOrNoOptions)}}</text>
			</view>
			<view class="space"></view>
			<view class="info-item">
				<text class="item-content">姓名</text>
				<text class="item-value">{{user.name}}</text>
			</view>
			<view class="space"></view>
			<view class="info-item">
				<text class="item-content">性别</text>
				<text class="item-value">{{user.gender | optionsFilter(userSexOptions)}}</text>
			</view>
			<view class="space"></view>
			<view class="info-item">
				<text class="item-content">状态</text>
				<text class="item-value">{{user.status | optionsFilter(userStatusOptions)}}</text>
			</view>
			<view class="space"></view>
			<view class="info-item">
				<text class="item-content">手机号码</text>
				<text class="item-value">{{user.mobile}}</text>
			</view>
			<view class="space"></view>
			<view class="info-item">
				<text class="item-content">地址</text>
				<text class="item-value">{{user.address}}</text>
			</view>
			<view class="space"></view>
			<view class="info-item">
				<text class="item-content">邮箱</text>
				<text class="item-value">{{user.email}}</text>
			</view>
			<view class="space"></view>
			<view class="info-item">
				<text class="item-content">QQ</text>
				<text class="item-value">{{user.qq}}</text>
			</view>
			<view class="space"></view>
			<view class="info-item">
				<text class="item-content">企业微信账户</text>
				<text class="item-value">{{user.wcAccount}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import constants from '@/utils/constants.js'
	
	export default {
		props:{
			user: {
				type: Object,
				default() {
					return { }
				}
			},
		},
		data() {
			return {
				yesOrNoOptions: constants.yesOrNoOptions,
				userStatusOptions: constants.userStatusOptions,
				userSexOptions: constants.userSexOptions,
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		margin: 30upx;
		font-size: 28upx;
		line-height: 30upx;
	}
	
    .photo-content {
		margin-top: 34upx;
		float: left;
		color: #999;
	}
	
    .photo {
		width: 100upx;
		height: 100upx;
		float: right;
		border-radius: 50upx;
	}
	
    .space {
		width: 100%;
		height: 1upx;
		margin-top: 30upx;
		float: left;
		background-color: #e1e1e1;
	}
	
    .info-item {
		margin-top: 34upx;
		float: left;
		width: 100%;
	}
	
    .item-content {
		float: left;
		color: #999;
	}
	
    .item-value {
		float: right;
	}
</style>